<template>

  <div id="search_view">
    <header class="mui-bar mui-bar-nav" style="top: 0;">
      <a class=" mui-icon  mui-pull-left  arr_left" @tap="open_search_view(false)">
      </a>
      <h1 class="mui-title">搜索商品</h1>

    </header>

      <div class="mui-scroll-wrapper search_view_scroll_wrapper" style="padding-top: 44px">
        <div class="mui-scroll">
          <!--这里放置真实显示的DOM内容-->
          <!--数据列表-->
          <div class="mui-content" style=" padding-top: 0">

            <div class="search-group-wrap">
              <div class="search-group">
                <span class="search-btn"></span>
                <input type="text" id="search_input" v-model="keyworks" placeholder="请输入商品名称搜索...">
                <i class="mui-icon mui-icon-closeempty" id="clearSearchInput"></i>
              </div>
              <div class="subbtn" @tap="search_func">
                搜索
              </div>
            </div>

            <div class="search-group-list">

              <div class="ware-item" v-for="(i,k) in res_list">
                <a @tap="go_goods_page(i.goodsid)">
                  <div class="ware-img">
                    <img :src="i.pic" alt="">
                  </div>
                  <div class="ware-info">
                    <p class="ware-info-title">{{i.name}}</p>
                    <p class="ware-info-price">￥{{i.min_price}}元
                      <del class="ware-info-oPrice">￥{{i.max_price}}元</del>
                    </p>
                    <img class="ware-info-icon" src="../assets/images/ptsp/car_03.png" alt="">
                  </div>
                </a>
              </div>

            </div>

            <div class="no_res" v-if="no_res">
              <div style="line-height: 30px;"><i class="mui-icon mui-icon-info"></i></div>
              未找到相关商品
            </div>

          </div>
        </div>
      </div>




  </div>

</template>

<script>
  import ajax from "../ajax/ajax"
  export default {
    name: "Search",
    data() {
      return {
        keyworks:'',
        no_res:false,
        res_list:'',

      }
    },
    methods:{
      open_search_view(tf){
        this.$store.commit("open_search_view",tf)
      },
      search_func(){
        ajax.post(
          "api/goods/search",
          "bid="+this.$store.state.account.community.sqid+
          "&name="+this.keyworks
        ).then(res=>{
          console.log("搜索请求成功")
          console.log(res)
          if(res.code==1){
            if(res.data.length==0){
              this.no_res=true;
            }else {
              this.no_res=false;
            }
            this.res_list = res.data
          }
        }).catch(err=>{
          console.log(err)
          mui.toast("服务器搜索错误")
        })
      },
      go_goods_page(goodsid){
        this.open_search_view(false)
        this.$router.push("/shop/goods_list/goods?goodsid="+goodsid)
      }
    },
    mounted(){
      mui('.search_view_scroll_wrapper').scroll({
        deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
      });
    }
  }
</script>

<style scoped>
  html,
  body,
  .mui-content {
    overflow: hidden;
  }
#search_view{
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10001;

}
  .ware-info-title{
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .mui-action-back {
    height: 44px;
    width: 44px;
  }

  .mui-action-back img {
    width: 100%;
  }

  .arr_left {
    background-image: url(../assets/images/ptsp/left_arr_03.png);
    background-size: 24px 24px;
    background-position: center;
    background-repeat: no-repeat;
  }

  .mui-title {
    font-size: 0.768rem;
  }

  .mui-bar-nav a {
    font-size: 0.5973rem;
    color: #888888;
    line-height: 44px;
  }

  body,
  html,
  .mui-content {
    padding-top: 0;
    margin-top: 0;
  }

  .mui-bar-nav ~ .mui-content {
  }

  .mui-bar {
    top: 0;
  }

  .no_res {
    text-align: center;
    line-height: 50px;
    color: #888888;
    margin-top: 60px;
  }


  body,
  html,
  .mui-content {
    font-family: "微软雅黑";
    background-color: #FFFFFF;
    padding-bottom: 6.4rem;
    padding-top: 0.5973rem;
  }
  .mui-bar {
    border-bottom: 1px solid #c5c5c5;
  }
  .mui-bar .mui-segmented-control {
    top: 0;
  }
  .mui-segmented-control.mui-scroll-wrapper {
    height: 44px;
  }
  .mui-segmented-control.mui-scroll-wrapper .mui-scroll {
    height: 44px;
  }
  .mui-action-back {
    height: 44px;
    width: 44px;
  }
  .mui-action-back img {
    width: 100%;
  }
  .mui-title {
    height: 44px;
  }
  .nav {
    width: 1000px;
  }
  .fr {
    float: right;
  }
  .fl {
    float: left;
  }
  .mui-bar {
    top: 0.8533rem;
    font-size: 0.7253rem;
  }
  .hr_20 {
    height: 0.4267rem;
    background-color: #f6f6f6;
  }
  .ptsp_top_stats {
    height: 0.9387rem;
    width: 100%;
    z-index: 20;
    background-color: #FFFFFF;
    position: fixed;
    top: 0;
    left: 0;
  }
  .search-group-wrap {
    background-color: #f6f6f6;
    padding: 0.4267rem 0.64rem;
    position: relative;display: flex;align-items: center;justify-content: space-between;

  }
  .search-group{
    box-shadow: 0 0 5px #ccc;
    border-radius: 0.5973rem;
    width: 80%;
    display: flex;
    background: #ffffff;
    overflow: hidden;align-items: center;
  }
  .search-btn{
    width: 1.1947rem;
    height: 1.1947rem;
    float: left;
    background-image: url(../assets/images/search_03.png);
    background-repeat: no-repeat;
    background-size: 0.512rem 0.512rem;
    background-position: 0.4267rem;
    display: inline-block;
  }
  .search-group input {
    height: 1.1947rem;
    margin: 0;
    padding: 0;
    border: none;

    padding-left: .5rem;
    font-size: 0.512rem;

  }
  .search-group i {
    /*position: absolute;
    top: 0.512rem;
    right: 1.0667rem;*/
    margin-right: 0.1rem;
  }
  .search-group-wrap .subbtn{width: 15%;height: 1.1947rem;font-size: 0.6rem;text-align: center;line-height: 1.1947rem;border: 1px solid #1c83fc;border-radius: 0.2rem;background: #1c83fc;color: #fff;}
  .search-group-list {
    padding-left: 0.64rem;
    padding-right: 0.64rem;
    border-bottom: 1px solid #efefef;
  }
  .search-group-list{
    overflow: hidden;
  }
  .ware-item{
    padding: 10px;
    overflow: hidden;
  }
  .ware-img{
    width: 5rem;
    height: 4rem;
    float: left;
  }
  .ware-img img{
    display: block;
    width: 100%;
    height: 100%;
  }

  .ware-info{
    padding-left: 1rem;
    overflow: hidden;
  }
  .ware-info-title{
    font-size: .7rem;
    margin: .2rem;
  }
  .ware-info-price{
    margin: .5rem .2rem;
    color: #f90;
  }
  .ware-info-oPrice{
    margin-left: .5rem;
    color: #999;
  }
  .ware-info-icon{
    width: 1rem;
    height: 1rem;
    display: block;
    float: right;
  }

</style>
